<template>
  <view>
    <common-header
      :isCanBack="true"
      titleName=" "
      :className="headerClassName"
    ></common-header>
    <view class="container" v-show="pageLoaded">
      <view class="detail-banner">
        <image :src="img_baseUrl + info.coverImgPath" mode="aspectFill" />
      </view>
      <view class="detail-wrap">
        <view class="detail-tags" v-if="false">
          <view class="detail-tag">露营计划</view>
          <view class="detail-tag">春日一起露营吧</view>
        </view>
        <view class="detail-title">{{ info.title }}</view>
        <view class="detail-content">
          <mp-html :content="info.articleText" />
        </view>
      </view>
      <view class="detail-signBox" v-if="isShowSign">
        <view
          class="detail-signBtn"
          @click="toPage(info.butLinkUrl)"
        >
          {{ info.showText || "去报名" }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mpHtml from "mp-html/dist/uni-app/components/mp-html/mp-html";
import commonHeader from "../../components/commonHeader.vue";
import { requestGet } from "../../utils/request";

const img_api = process.env.VUE_APP_BASEURL_IMG_API;

export default {
  components: {
    commonHeader,
    mpHtml,
  },
  props: {
    id: String,
  },
  data() {
    return {
      pageLoaded: false,
      loading: 2, // 0:不再加载; 1:加载中; 2:加载完成;
      img_baseUrl: img_api,
      headerClassName: "",
      info: {},
    };
  },
  computed: {
    isShowSign() {
      return (this.info.butLinkUrl && this.info.butLinkUrl != "");
    },
  },
  onLoad() {
    this.loadDetail().then(() => {
      this.pageLoaded = true;
    });
  },
  onPageScroll(e) {
    if (e.scrollTop > 100) {
      this.headerClassName = "headerClass";
    } else {
      this.headerClassName = "";
    }
  },
  methods: {
    toPage(url, params = {}) {
      let paramsString = "";
      for (const paramsKey in params) {
        if (!paramsString) {
          paramsString += "?";
        } else {
          paramsString += "&";
        }
        paramsString += `${paramsKey}=${params[paramsKey]}`;
      }
      uni.navigateTo({
        url: `${url}${paramsString}`,
      });
    },
    loadDetail() {
      return requestGet(`/baseplatform/home/content/detail/${this.id}`).then(
        ({ code, data: info }) => {
          if (code !== 200) {
            info = {};
          }
          info.articleText = info && info.articleText ? info.articleText.split("\t").join("&nbsp;&nbsp;&nbsp;&nbsp;") : '';
          this.info = info;
          this.loading = 0;
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: env(safe-area-inset-bottom);
}

.detail-banner {
  height: 750rpx;

  image {
    display: block;
    height: 100%;
    width: 100%;
  }
}

.detail-wrap {
  background: #ffffff;
  padding: 40rpx;
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  margin-top: -40rpx;

  .detail-tags {
    margin-bottom: 16rpx;
    display: flex;
    align-items: center;

    .detail-tag {
      padding: 4rpx 12rpx;
      background: #F3F6F5;
      border-radius: 8rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #3FAA73;
      line-height: 32rpx;
      margin-left: 16rpx;

      &:first-of-type {
        margin-left: 0;
      }
    }
  }

  .detail-title {
    font-size: 48rpx;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
    line-height: 68rpx;
  }

  .detail-content {
    padding: 48rpx 0 92rpx;
  }
}

.detail-signBox {
  background: #ffffff;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 2rpx solid rgba(0, 0, 0, 0.1);
  padding-top: 16rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

  .detail-signBtn {
    width: 686rpx;
    height: 88rpx;
    background: #3FAA73;
    border-radius: 88rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
}
</style>
